<template>
  <div class="StoreTaskTrackingDetail">
    <div class="liquor" v-if="pageObj.busType== '1'">
      <div class="head">
        <p>
          编号：
          <span>{{pageObj.graCode}}</span>
        </p>
        <el-divider direction="vertical"></el-divider>
        <p>
          名称：
          <span>{{pageObj.graName}}</span>
        </p>
        <el-divider direction="vertical"></el-divider>
        <p>
          状态：
          <span>{{pageObj.useState?'启用':'关闭'}}</span>
        </p>
        <el-divider direction="vertical"></el-divider>
        <p>
          所属门店：
          <span>{{pageObj.orgName}}</span>
        </p>
        <el-divider direction="vertical"></el-divider>
        <p>
          关联摄像头：
          <span>{{pageObj.deviceName}}</span>
        </p>
        <el-divider direction="vertical"></el-divider>
        <p>
          拍摄区域：
          <span>{{pageObj.takeArea}}</span>
        </p>
        <el-divider direction="vertical"></el-divider>
        <p>
          是否有预警：
          <span>{{pageObj.isWarn?'无预警':'有预警'}}</span>
        </p>
      </div>

      <div class="imgBox">
        <div class="box">
          <p>酒柜定妆照</p>
          <img :src="picUrl" />
        </div>
        <div class="box">
          <p>酒柜抓拍照</p>
          <img :src="pageObj.beforeFileUrl" />
        </div>
        <div class="box" v-if="finshTag">
          <p>整改后</p>
          <img :src="pageObj.afterFileUrl" @error="handleImgUrlError" />
        </div>
      </div>
      <div class="textInput" v-if="finshTag">
        处理意见:
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入处理意见"
          resize="none"
          v-model="pageObj.dealInfo"
          disabled
        ></el-input>
      </div>
      <div class="textInput" v-if="finshTag">
        整改情况说明:
        <el-input
          type="textarea"
          resize="none"
          :autosize="{ minRows: 2, maxRows: 4}"
          v-model="pageObj.decription"
          disabled
        ></el-input>
      </div>

      <div class="BtnGroup">
        <el-button size="mini" @click="$router.go(-1)" round>返回</el-button>
      </div>
    </div>
    <div class="clothes" v-if="pageObj.busType=='0'">
      <div class="head">
        <p>
          任务名称：
          <span>{{pageObj.taskName}}</span>
        </p>
        <el-divider direction="vertical"></el-divider>
        <p>
          门店：
          <span>{{pageObj.orgName}}</span>
        </p>
        <el-divider direction="vertical"></el-divider>
        <p>
          巡查项：
          <span>{{pageObj.busType?'工装':'陈列'}}</span>
        </p>
        <el-divider direction="vertical"></el-divider>
        <p>
          执行时间：
          <span>{{pageObj.preformTime}}</span>
        </p>
        <el-divider direction="vertical"></el-divider>
        <p>
          是否预警：
          <span>{{pageObj.isWarn?'无预警':'有预警'}}</span>
        </p>
      </div>

      <div class="imgBox">
        <div class="box">
          <img :src="pageObj.makeupFileUrl" @error="handleImgUrlError" />
          <p>抓拍人脸照</p>
        </div>
        <div class="box">
          <img :src="pageObj.beforeFileUrl" @error="handleImgUrlError" style="height: 260px" />
          <p>实时抓拍照</p>
        </div>
      </div>
      <div class="btnGroup">
        <el-button type="warning" round @click="$router.go(-1)" size="mini">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getTaskInfoDetail } from "@/api/smartShops";
export default {
  name: "Detail",
  data() {
    return {
      finshTag: false,
      pageMark: "",
      pageObj: {},
      picUrl:""
    };
  },
  methods: {
    async getData() {
      let  { result }  = await getTaskInfoDetail({
        performUuid: this.pageObj.performUuid,
        isWarn: this.pageObj.isWarn
      });
      this.pageObj = { ...this.pageObj, ...result };
      if (this.pageObj.isWarn == 0) {
        this.finshTag = false;
        this.picUrl = this.pageObj.fileUrl;
      } else {
        this.finshTag = true;
        this.picUrl = this.pageObj.makeupFileUrl;
      }
    },
    handleImgUrlError(e) {
      e.target.src = require("@/assets/images/img_icon/head.svg");
    }
  },
  created() {
    let { data } = this.$route.query;
    this.pageObj = { ...data };
    this.pageMark = data.pageMark;
    this.getData();
  }
};
</script>

<style scoped lang="scss">
.StoreTaskTrackingDetail {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .head {
    height: 50px;
    width: 100%;
    font-size: 14px;
    border-bottom: 1px solid #dcdfe6;
    line-height: 50px;

    p {
      display: inline-block;
    }

    span {
      font-weight: 500;
      color: red;
    }

    .el-divider {
      height: 60%;
    }
  }

  .liquor {
    height: 100%;
    width: 100%;
    .imgBox {
      width: 100%;
      height: 60%;
      margin: 15px 0;
      .box {
        width: 30%;
        height: 100%;
        box-sizing: border-box;
        float: left;
        text-align: center;
        p {
          height: 20px;
          line-height: 20px;
          font-size: 13px;
        }

        img {
          width: 60%;
          height: calc(100% - 20px);
        }
      }
    }

    .textInput {
      width: 60%;
      margin-left: 80px;
    }

    .BtnGroup {
      width: 100%;
      height: 30px;
      margin: 20px 0 0 0;
      text-align: center;

      .el-button {
        margin: 0 20px;
      }
    }
  }

  .clothes {
    min-width: 400px;
    height: 100%;

    .imgBox {
      height: 65%;
      width: 100%;
      padding: 20px 0 0 0;
      display: flex;

      .box {
        width: 25%;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
        font-size: 13px;
        img {
          width: 200px;
          height: 200px;
          margin: 10px 0;
          border: 1px solid #ebeef5;
        }
      }
    }

    .btnGroup {
      width: 50%;
      height: 100px;
      text-align: center;
    }
  }
}
</style>

<style>
.el-textarea.is-disabled .el-textarea__inner {
  color: #606266 !important;
}
</style>
